<template>
  <div style="height: 100%">
    <div class="top-box flex-y-center flex-sb">
      <header-select @selectProject="getProject" />
      <div class="legend-box flex-y-center">
        <div class="item flex-y-center">
          <div class="block" />
          <span class="label">主体</span>
        </div>
        <div class="item flex-y-center">
          <div class="block" style="height: 6px; background-color: #ff6a6a" />
          <span class="label">预售</span>
        </div>
      </div>
    </div>
    <el-scrollbar v-loading="loading" style="height: calc(100% - 50px)" element-loading-text="加载中...">
      <div class="chart-box" v-for="(item, index) in buildingData" :key="index" @click="gotoDetail(item)">
        <BuildingBar :id="'id' + index" :data="item" style="height: 200px" />
        <div class="building-name ellipsis2" style="height: 35px" :title="item.buildingName">{{ item.buildingName }}</div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
import { projectOverall } from '@/api/cqCheck'
import HeaderSelect from '@/views/statement/components/HeaderSelect'
import BuildingBar from './components/BuildingBar'
export default {
  name: 'CqCheckSchedule',
  components: { HeaderSelect, BuildingBar },
  data() {
    return {
      loading: false,
      currentProject: {},
      buildingData: []
    }
  },
  methods: {
    // 选择项目
    getProject(project) {
      if (!project) return
      this.currentProject = project
      this.getBuildingChartData()
    },
    // 获取楼栋统计数据
    async getBuildingChartData() {
      const projectId = this.currentProject?.id
      if (!projectId) return

      this.buildingData = []
      this.loading = true
      const res = await projectOverall({ projectId }).catch(() => false)
      this.loading = false
      if (res === false) return
      this.buildingData = res.data
    },
    gotoDetail(item) {
      this.$router.push({
        path: '/cqCheck/schedule/buildingView',
        query: { buildingId: item.buildingId }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.top-box {
  height: 50px;
  padding: 10px 20px;
}
.legend-box {
  .item + .item {
    margin-left: 20px;
  }
  .block {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: #1826b1;
    margin-right: 5px;
  }
  .label {
    color: #333;
  }
}
.chart-box {
  float: left;
  width: 150px;
  height: 250px;
  padding: 0 20px;
  box-sizing: border-box;
  cursor: pointer;
  .building-name {
    font-size: 14px;
    line-height: 18px;
    color: #666;
    text-align: center;
    font-weight: bold;
  }
}
</style>
